<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tu</title>
    <link rel="icon" href="./images/favicon.ico">
    <link rel="stylesheet" href="./css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1862864_me7k3icauw.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1901349_arfdwh0b9p.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->

</head>
<body>
    <div class="sidenav">
        <div class="row nav-top">
            <div class="top-left">             
                    <a href="#home">
                        <img src="./images/myicon.jpg" class="img-responsive" alt="Image" >
                    </a>
                
            </div>
            <div class="top-right">
                <h6>Smaxt Tunbiu</h6>
                <p>Nice to meet you</p>
            </div>
        </div>
        <div class="nav-content">
            <div class="container-fluid md">
               <nav class="mnu mx-auto"> 
                    <button class="toggle" id="toggle">Menu</button>                   
                   <div id="change" class="change">
                        <ul class="menu" id="menu">
                            <!--运用js实现颜色变换  -->
                            <li class="menu-part select">
                                <a href="#home" class="scroll " id="tohome">Home</a>
                            </li>
                            <li class="menu-part ">
                                <a href="#about" class="scroll" id="toabout">About Me</a>
                            </li>
                            <li class="menu-part" >
                                <a href="#work" class="scroll" id="towork">Recent Work</a>
                            </li>
                            <li class="menu-part" >
                                <a href="#blog" class="scroll" id="toblog">Blog Entries</a>
                            </li>
                            <li class="menu-part" >
                                <a href="#contact" class="scroll" id="tocontact">Contact Me</a>
                            </li>                       
                        </ul>
                   </div>
               </nav>              
            </div>
            
        </div>
    </div>
    <div class="main-page" id="page">
        <!-- 轮播开始 home页面 -->
        <div class=" home-p" id="home" >
            <div class="box">
                <div id="list">
                    <div class="banner-content1 cover">
                        <div class="container">
                            <div class="mx-auto text-center">
                                <p class="h-title">Welcome to </p>
                                <p class="h-title">my homepage</p>
                                <p class="mx-auto mt-3 h-text">
                                    May there be enough clouds in your life <br>to make a beautiful sunset.
                                    
                                </p>
                                <a href="#about" class="btn-more" >Learn More</a>
                            </div>
                        </div>
                    </div>
                    <div class="banner-content2 cover">
                        <div class="container">
                            <div class="mx-auto text-center">
                                <p class="h-title">Pandora</p>
                                <p class="mx-auto mt-3 h-text">
                                    Life is like a box of chocolates<br>you never know what you are  going to get.
                                </p>
                                <a href="#about" class="btn-more" >Learn More</a>
                            </div>
                        </div>
                    </div>
                    <div class="banner-content3 cover">
                        <div class="container">
                            <div class="mx-auto text-center">
                                <p class="h-title">Starry Night</p>
                                <p class="mx-auto mt-3 h-text">
                                    Starry starry night,Paint your palette blue and grey<br>Look out on a summer's day<br>With eyes that know the darkness in my soul.
                                </p>
                                <a href="#about" class="btn-more" >Learn More</a>
                            </div>
                        </div>
                    </div>
                    <div class="banner-content4 cover">
                        <div class="container">
                            <div class="mx-auto text-center">
                                <p class="h-title">Tagore</p>
                                <p class="mx-auto mt-3 h-text">
                                    Let life be beautiful like summer flowers <br>and death like autumn leaves.
                                </p>
                                <a href="#about" class="btn-more" >Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <button id="prev">
                    <i class="iconfont icon-jiantou2"></i>
                </button>
                <button id="next">
                    <i class="iconfont icon-jiantou2"></i>
                </button>
            </div>
        </div>
        <!-- home over -->

        <!-- about-page -->
        <div class="content-page about-p" id="about" >
            <div class="title">
                <h3>About Me</h3>
            </div>
            <div class="content">
                <div class="box_ab">
                    <div id="list_ab" class="outer">
                        <div class="inner">
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/6225008dly1gc8w5vjjtjj216o2jq4m6.jpg" alt="">
                                    <p>我喜欢生活中的任何时刻，傍晚的微风、喧闹的街道与天上的弯月，将烦恼与忧愁融化在心里。</p>
                                </div>
                            </div>
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/6225008dly1gcjarpi84pj216o2dcb29.jpg" alt="">
                                    <p>微风经过歌声，少年经过春天。这里是法罗群岛·冰岛，这里的春天也是充满生命力的。</p>
                                </div>
                            </div>
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/6225008dly1gcjartcsv3j216o2dc4mx.jpg" alt="">
                                    <p>群山用尽新绿。忽然想到海子的诗：“面朝大海，春暖花开。”</p>
                                </div>
                            </div>
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/cb69312agy1gefiru8mxzj21jk2qsqv7.jpg" alt="">
                                    <p>看黄昏退落，看黑夜将行，看林梢闪出的第一颗星星。暮色里，晚风拂过指尖，月光慢慢拉长身影。</p>
                                </div>
                            </div>
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/cb69312agy1gefirj5f72j21a62a34qp.jpg" alt="">
                                    <p>归途中，头轻靠在车窗，偶然发现这一抹晚霞，早已晕染黄昏。虽然彩云易散琉璃脆，但在留在心里的美好是不会褪色的。</p>
                                </div>
                            </div>
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/cb69312agy1gdsdjhazsnj20v91jke81.jpg" alt="">
                                    <p>从东京到京都的新干线，往前进方向的右侧车窗可以看见富士山哦。</p>
                                </div>
                            </div>
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/cb69312agy1gelbbcukozj21291w04qq.jpg" alt="">
                                    <p>风偷偷跑进衣袖，带来夏日的清凉。</p>
                                </div>
                            </div>
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/cb69312agy1gf0h9098sfj227v3xzqv7.jpg" alt="">
                                    <p>“树深时见鹿，溪午不闻钟。野竹分青霭，飞泉挂碧峰。”——李白</p>
                                </div>
                            </div>
                            <div class="wrap">
                                <div class="i-text">
                                    <img src="./images/cb69312agy1gelbalkul2j20y01ohqv5.jpg" alt="">
                                    <p>会发光的绿色，一尘不染的夏天。</p>
                                </div>
                            </div>
                        </div>                        
                    </div>    
                    <div class="arrow">
                        <button id="prev_ab">
                            <i class="iconfont icon-jiantou2"></i>
                        </button>
                        <button id="next_ab">
                            <i class="iconfont icon-jiantou2"></i>
                        </button>
                    </div>
                    <div id="btn_ab">
                        <span class="select_ab"></span>
                        <span></span>
                        <span></span>
                    </div>                   
                </div>
            </div>
        </div>
        <!-- about over -->

        <!-- my work page -->
        <div class="content-page work-p" id="work" >
            <div class="title">
                <h3>Recent Work</h3>
            </div>
            <div class="content">
                <div class="w-row">
                    <div class="item grids-left">
                        <div class="item-wrap">
                            <div class="item-top up">
                                <a href="https://tusibei.gitee.io/homework6.10/" target="_blank">
                                    <img src="./images/006af8osgy1g5yc2l0lnjj31xg1g3x6p.jpg" alt="">
                                </a>
                                <h4>Serendipity </h4>
                            </div>
                            <div class="item-top down">
                                <a href="https://tusibei.gitee.io/homework6.9" target="_blank">
                                    <img src="./images/6225008dly1ge6cel0htaj22bc1qiqv7.jpg" alt="">
                                </a>
                                <h4>Iridescent </h4>
                            </div>
                        </div>
                    </div>
                    <div class="item grids-center">
                       <div class="item-wrap">
                            <div class="item-top up">
                                <a href="https://tusibei.gitee.io/hw6.17-mi-page" target="_blank">
                                    <img src="./images/6225008dgy1garr8h0lyyj216o23u7wh.jpg" alt="">
                                </a>
                                <h4>Aurora</h4>
                            </div>
                            <div class="item-top down">
                                <a href=" https://tusibei.gitee.io/homework6.2-baidu" target="_blank">
                                    <img src="./images/6225008dly1ge6cfahh5fj22bc1qix6t.jpg" alt=""> 
                                </a>
                                <h4>Solitude </h4>
                            </div>
                       </div>
                    </div>
                    <div class="item grids-right">
                        <div class="item-wrap">
                            <div class="item-top up">
                                <a href="https://tusibei.gitee.io/homework6.3" target="_blank">
                                    <img src="./images/6225008dly1ge6cdo8y99j22bc1qix6r.jpg" alt="">
                                </a>
                                <h4>Epiphany </h4>
                            </div>
                            <div class="item-top down">
                                <a href=" https://tusibei.gitee.io/homework5.29" target="_blank">
                                    <img src="./images/6225008dly1ge6ceui0ztj22bc1qiu0x.jpg" alt="">
                                </a>
                                <h4>Ethereal</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- work over -->

        <!-- blog -->
        <div class="content-page blog-p" id="blog" >
            <div class="title">
                <h3>Blog Entries</h3>
            </div>
            <div class="content">
                <div class="tabs-content">
                    <div class="wrapper">
                        <ul class="tabs">
                            <li class="active">
                                <a href="javascript:void(0);" >June 2020</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">May 2020</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">April 2020</a>
                            </li>
                            <li>
                                <a href="javascript:void(0);">March 2020</a>
                            </li>
                        </ul>
                        <div id="firsttab-group" class="tabgroup">
                            <div id="tab1"  style="display: block;">
                                <ul>
                                    <li>
                                        <div class="tab-item">
                                            <img src="./images/006af8osgy1g5yc2n1nbnj31jk1jke82 (2).jpg" alt="">
                                            <div class="text-content">
                                                <h4>世事沧桑话鸣鸟</h4>
                                                <span>25 Jun.</span>
                                                <p>
                                                    那只是一只鸟在晚上鸣叫，认不出是什么鸟。当我泉边取水回来，走过满是石头的牧场。我站得那么静，头上的天空和水桶里的天空一样静。多少年过去，多少地方多少脸都淡漠了，有的人已谢世。而我站在远方，夜那么静，我终于肯定，我最怀念的，不是那些终将消逝的东西，而是鸟鸣时那种宁静。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="tab-item">
                                            <img src="./images/005QRlUQly1g5fsnyr8ebj32cx2cxb29 (2).jpg" alt="">
                                            <div class="text-content">
                                                <h4>我喜欢你是寂静的</h4>
                                                <span>12 Jun.</span>
                                                <p>
                                                    我喜欢你是寂静的，好像你已远去。
                                                    你听起来像在悲叹，,一只如鸽悲鸣的蝴蝶。
                                                    你从远处听见我，我的声音无法触及你：
                                                    让我在你的沉默中安静无声。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tab-item">
                                            <img src="./images/006af8osgy1g5yc2h8i6ej31jk15okjm.jpg" alt="">
                                            <div class="text-content">
                                                <h4>吉檀迦利</h4>
                                                <span>1 Jun.</span>
                                                <p>
                                                    离你最近的地方，路途最远，最简单的音调，需要最艰苦的练习，旅客要在每个生人门口敲叩，才能敲到自己的家门，人要在外面到处漂流，最后才能走到最深的内殿，我的眼睛向空阔处四望，最后才合上眼说：“你原来住在这里！”
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                            <div id="tab2" style="display: none;">
                                 
                                <ul>
                                    <li>
                                        <div class="tab-item">
                                            <img src="./images/cb69312agy1ge1r9cwr5kj22221jkhdv.jpg" alt="">
                                            <div class="text-content">
                                                <!-- <h4>Elegy Written in a Country Churchyard</h4>
                                                <span>17 May.</span>
                                                <p>
                                                    The curfew tolls the knell of parting day,The lowing herd wind slowly o'er the leaThe ploughman homeward plods his weary way,And leaves the world to darkness and to me.
                                                </p> -->
                                                <h4>墓地挽歌</h4>
                                                <span>17 May.</span>
                                                <p>
                                                    晚钟送终了这一天，牛羊咻咻然徐度原野，农夫倦步长道回家，仅余我与暮色平分此世界。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="tab-item">
                                            <img src="./images/cb69312agy1ge1r93etlrj22191iynpg.jpg" alt="">
                                            <div class="text-content">
                                                <h4>当时光已逝</h4>
                                                <span>11 May.</span>
                                                <p>
                                                    假如时光已逝，鸟儿不再歌唱，风儿也吹倦了，那就用黑暗的厚幕把我盖上，如同黄昏时节你用睡眠的衾被裹住大地，又轻轻合上睡莲的花瓣。路途未完，行囊已空,衣裳破裂污损，人已精疲力竭。你驱散了旅客的羞愧和困窘，使他在你仁慈的夜幕下，如花朵般焕发生机。在你慈爱的夜幕下苏醒。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tab-item">
                                            <img src="./images/cb69312agy1ge1r9aq0sgj22231jke83.jpg" alt="">
                                            <div class="text-content">
                                                <h4>飞鸟集</h4>
                                                <span>9 May.</span>
                                                <p>
                                                    夏天离群漂泊的飞鸟，飞到我的窗前鸣啭歌唱，一会又飞走了。而秋天的黄叶无歌可唱，飘飘零零，叹息一声，又落在窗前了。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>

                                    </li>
                                </ul>                           
                            </div>
                            <div id="tab3" style="display: none;">
                                <ul>
                                    <li>
                                        <div class="tab-item">
                                            <img src="./images/6225008dly1ge6cepgb0gj22bc1qiu10.jpg" alt="">
                                            <div class="text-content">
                                                <h4>初雪</h4>
                                                <span>29 Apr.</span>
                                                <p>
                                                    世界上最遥远的距离不是树与树的距离，而是同根生长的树枝，却无法在风中相依。世界上最遥远的距离，不是树枝无法在风中相依，而是相互瞭望的星星，却永远没有交汇的轨迹。 
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>                                     
                                        <div class="tab-item">
                                            <img src="./images/6225008dly1ge6cecsslvj22bc1qi4qr.jpg" alt="">
                                            <div class="text-content">
                                                <h4>飞鸟集</h4>
                                                <span>22 Apr.</span>
                                                <p>
                                                    我听见回声，来自山谷和心间，以寂寞的镰刀收割空旷的灵魂，不断地重复决绝，又重复幸福，终有绿洲摇曳在沙漠，我相信自己，生来如同璀璨的夏日之花，不凋不败，妖治如火 ，承受心跳的负荷和呼吸的累赘 ，乐此不疲。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tab-item">
                                            <img src="./images/6225008dly1ge6cesrp91j22bc1qi1kz.jpg" alt="">
                                            <div class="text-content">
                                                <h4>内画</h4>
                                                <span>9 Apr.</span>
                                                <p>
                                                    我们居住的生命,有一个小小的瓶口,可以看看世界。鸟垂直地落进海里，可以看看蒲草的籽和玫瑰。我们从没有到达玫瑰，或者摸摸大地的发丝。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                            <div id="tab4" style="display: none;">
                                <ul>
                                    <li>
                                        <div class="tab-item">
                                            <img src="./images/6225008dgy1fjbbwca121j21jk1jktqk (2).jpg" alt="">
                                            <div class="text-content">
                                                <h4>当一盏灯破碎了</h4>
                                                <span>22 Mar.</span>
                                                <p>
                                                    当一盏灯破碎了，它的光亮就灭于灰尘；当天空的云散了，彩虹的辉煌随即消隐。要是琵琶断了弦，优美的乐音归于沉寂；要是嘴把话说完，爱的韵味很快就忘记。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        
                                        <div class="tab-item">
                                            <img src="./images/6225008dgy1fjbbwf5pxdj21jk1jkx3q (2).jpg" alt="">
                                            <div class="text-content">
                                                <h4>像这样细细地听</h4>
                                                <span>17 Mar.</span>
                                                <p>
                                                    像这样细细地听，如河流凝神倾听自己的源头。像这样深深地嗅．嗅一朵小花．直到知觉化为乌有。像这样，在蔚蓝的空气里溶进了无底的渴望。像这样，在床单的蔚蓝里孩子遥望记忆的远方。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tab-item">
                                            <img src="./images/6225008dgy1fyra20npr9j216o23u7vr (2).jpg" alt="">
                                            <div class="text-content">
                                                <h4>烟火</h4>
                                                <span>3 Mar.</span>
                                                <p>
                                                    我们去看烟火好吗？去，去看那繁花之中，如何再生繁花，梦境之上，如何再现梦境。让我们并肩，走过荒凉的河岸。仰望夜空，生命的狂喜与刺痛，都在这顷刻，宛如烟火。
                                                </p>
                                                <div class="accent-button button">
                                                    <a href="#contact">Continue Reading</a>
                                                </div>
                                            </div>
                                        </div>

                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- contact page -->
        <div class="content-page contact-p" id="contact" >
            <div class="title">
                <h3>Contact Me</h3>
                <p>Thank you for coming to my homepage. If you are interested in my homepage, you can fill in the information to contact me. I would be happy to talk with you if you need my assistance in your study,research or even life.</p>
            </div>
            <div class="content">
                <div class="contact-left">
                    <div class="contact-list">
                        <ul>
                            <li>
                                <i class="iconfont icon-location"></i>
                                <span>Wuhan&nbsp;&nbsp;Hubei</span>
                            </li>
                            <li>
                                <i class="iconfont icon-shouji54"></i>
                                <span>14875617456</span>
                            </li>
                            <li>
                                <i class="iconfont icon-xinfeng"></i>
                                <span>461739451@qq.com</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="contact-right">
                    <div class="contact-form">
                        <form action="javascript:void(0);" method="POST" name="blog">
                            <div>
                                <label for="name">Name</label>
                                <input type="text" 
                                    placeholder="Your name..."
                                    name="name"
                                    id="name"
                                >
                            </div>
                            <div>
                                <label for="email">Email</label>
                                <input type="text"
                                    placeholder="Your email..."
                                    name="email"
                                    id="email"
                                >
                            </div>
                            <div class="message">
                                <label for="message">Message</label>
                                <!-- textarea不可以换行 有空格placeholder不显示 -->
                                <textarea name="message" id="message" cols="30" rows="10" placeholder="Your message..."></textarea>
                            </div>
                            <div>
                                <input type="submit" value="Send Message" class="sub-c" id="submit-btn">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>
                    Copyright © 2020 Tusibei.All rights reserved.
                </p>
            </div>            
        </div>
        <div class="sub-box modal" id="myBox">
            <div class="box-wrap modal-content">
                <div class="header">
                    <p>INFOTIP</p>
                    <span id="closeBtn">×</span>
                </div>
                <div class="info">
                    <p>Thank you for your message,I will relpy as soon as possible.</p>
                </div>
            </div>
        </div>       
        <div class="sub-box modal" id="theBox">
            <div class="box-wrap modal-content">
                <div class="header">
                    <p>ATTENTION</p>
                    <span id="theBtn">×</span>
                </div>
                <div class="info">
                    <p>Sorry , please complete your information.</p>
                </div>
            </div>
        </div>       
    </div>





    <script type="text/javascript" src="./js/index.js"></script>
</body>
</html>